<script setup lang="ts">

defineProps<{ msg: string }>()

</script>

<template>
  <div class="greetings-container">
    <div class="greetings-card">
      <h1 class="green">{{ msg }}</h1>
      <h3>
        您已成功创建一个项目
        <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
        <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
      </h3>
      <p class="tip">现在可以开始构建您的应用了！</p>
    </div>
  </div>
</template>

<style scoped>
.greetings-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
  background-color: #f0f2f5;
}

.greetings-card {
  padding: 2.5rem;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  text-align: center;
  max-width: 600px;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.greetings-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

h1 {
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--vt-c-text-light-1);
  margin-bottom: 1rem;
}

h1.green {
  color: var(--vt-c-green);
}

h3 {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--vt-c-text-light-2);
  margin-bottom: 2rem;
}

h3 a {
  color: var(--vt-c-indigo);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

h3 a:hover {
  color: #5b9eff;
}

.tip {
  font-size: 1rem;
  color: #999;
}


@media (min-width: 1024px) {
  .greetings-card {
    padding: 3rem;
  }
  h1 {
    font-size: 3rem;
  }
}
</style>
